<!DOCTYPE html>
<html>
<!---
  Copyright 2010 Karl Ostmo

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>jobfeed</title>
    
    <link rel="SHORTCUT ICON" href="/static/images/shortlogo16.png"/>
    
    <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css"/>
    <link type="text/css" rel="stylesheet" href="/static/jqueryui-theme/jquery-ui-1.7.2.custom.css"/>
    <link type="text/css" rel="stylesheet" href="/static/css/app.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi?key={% jsapi_key %}"></script>
    <script type="text/javascript" src="/static/lib/jquery.scrollTo-1.4.2-min.js"></script>
    <script type="text/javascript" src="/static/lib/microtemplate.js"></script>
    <script type="text/javascript" src="/static/js/front.js"></script>
    <script type="text/javascript" src="/static/js/date.format.js"></script>
    
    <script type="text/javascript" src="/static/js/skills.js"></script>
    <script type="text/javascript" src="/static/js/profile.js"></script>

    <script type="text/javascript">
      google.load('maps', '2');
      google.setOnLoadCallback(init);
    </script>
    
      <script type="text/javascript">
  var years_bins = {{years_bins}};
  var skill_type_summaries = {{skill_type_summaries}}

  var active_skill_objects = [];
  var active_keyword_objects = [];

  var active_organization_objects = []; // FIXME

// =============================================================================
function SkillObject(label, key) {
    this.label = label;
    this.key = key;
    this.years = null;
  }

  function KeywordObject(label, key) {
    this.label = label;
    this.key = key;
  }

  function OrganizationObject(label, key) {
    this.label = label;
    this.key = key;
  }

// =============================================================================
function keywordIsAdded(keyword) {
  var lowercased = keyword.toLowerCase();
  for (var i=0; i<active_keyword_objects.length; i++)
    if (active_keyword_objects[i].label.toLowerCase() == lowercased)
      return true;
  return false;
}

// =============================================================================
function loadSearchProfile() {

   var dropdown = document.getElementById("saved_searches_dropdown");
	if (dropdown) pickNewProfileAdvanced(dropdown);
}

// =============================================================================
function toggleAnywhereButton(checkbox) {
	var dependent_list = ['search-query', 'miles_input', 'checkbox_proximity'];
	for (var i in dependent_list) {
		document.getElementById(dependent_list[i]).disabled = checkbox.checked;
	}
}

// =============================================================================
function init() {
        loadSearchProfile();

        var dropdown = document.getElementById("saved_searches_dropdown");
	if (dropdown && !dropdown.options.length) document.getElementById("profile_dependent_actions").style.display = "none";


	var autocomplete_input_box_ids = ["skillInput", "keywordInput"];
	for (var i=0; i<autocomplete_input_box_ids.length; i++) {
		document.getElementById(autocomplete_input_box_ids[i]).value = "";
	}




	var visibility_checkbox_ids = ["checkbox_skill_filter", "checkbox_keyword_filter", "checkbox_organization_filter", "checkbox_education_filter", "checkbox_permanence_filter", "checkbox_seniority_filter"];
	var keyword_list_boxes = ["searchable_skills_list", "searchable_keywords_list", "searchable_organization_list", "education_dropdown_component", "permanence_dropdown_component", "seniority_dropdown_component"];
	for (var i=0; i<visibility_checkbox_ids.length; i++) {
		var checkbox = document.getElementById( visibility_checkbox_ids[i] );
		criteriaListVisibility(checkbox, keyword_list_boxes[i] );
	}
}

// =============================================================================
function extractKeywordKeys(keyword_objects) {
	var keyword_keys_list = [];
	for (var i=0; i<keyword_objects.length; i++) {
		var object = keyword_objects[i];
		keyword_keys_list.push( object.key );
	}

	return keyword_keys_list;
}

// =============================================================================
function compileExperienceDictionary(active_skill_objects) {
	var used_keys_dict = {};
	for (var i=0; i<active_skill_objects.length; i++) {
		var object = active_skill_objects[i];
		used_keys_dict[object.key] = parseInt(object.years_textbox.value);
	}

	return used_keys_dict;
}

// =============================================================================
function saveSearchProfile(form) {

	// Populate form values before submitting
	var used_keys_dict = compileExperienceDictionary(active_skill_objects);
	form["skill_keys"].value = stringifyDict(used_keys_dict);	// Hidden input element

	var keyword_keys_list = extractKeywordKeys(active_keyword_objects);
	form["keyword_keys"].value = keyword_keys_list.join(",");	// Hidden input element

	var dropdown = form["load_key"];
	var current_dropdown_text = dropdown.selectedIndex >= 0 ? dropdown.options[dropdown.selectedIndex].text : "";
	var target_name = prompt("Enter name to save profile as:", current_dropdown_text );
	if (target_name) {
		form["saved_name"].value = target_name;
		if (findDropdownOptionIndexForLabel(dropdown, target_name) >= 0) {
			return confirm("The name \"" + target_name + "\" is taken. Overwrite?");
		}
		return true;
	}

	return false;
}

// =============================================================================
function validateSave() {
	var form = document.forms["load_form"];
	if (saveSearchProfile(form)) {
		form.submit();
	}
}

// =============================================================================
function skillTypeChange(dropdown) {
        var blurb = document.getElementById("type_summary_foo");
	// TODO Make this less intrusive
//        blurb.innerHTML = "a " + skill_type_summaries[dropdown.selectedIndex];
}

// =============================================================================
function regenerateKeywordsTable(active_keyword_objects, keywords_table) {

	// Recreate table from scratch
	removeChildren( keywords_table );

	for (var i=0; i<active_keyword_objects.length; i++) {
		makeKeywordListItem( active_keyword_objects[i], keywords_table, i );
	}
}
// =============================================================================
function regenerateExperienceTable(active_skill_objects, skills_table) {

	// Recreate table from scratch
	removeChildren( skills_table );


	var row = document.createElement('tr');
	skills_table.appendChild( row );
	var header1 = document.createElement('th');
	row.appendChild(header1);
	header1.appendChild( document.createTextNode( "Experience" ) );

	var header2 = document.createElement('th');
	row.appendChild(header2);
	header2.appendChild( document.createTextNode( "Years" ) );

	for (var i=0; i<active_skill_objects.length; i++) {
		makeSkillListItem( active_skill_objects[i], skills_table, i );
	}
}

// =============================================================================
function addActiveSkillObject(last_selected_skill_object) {

	active_skill_objects.push( last_selected_skill_object );

	var skills_table = document.getElementById("pending_skills_list");
	regenerateExperienceTable(active_skill_objects, skills_table);

	document.getElementById("skillInput").value = "";
}

// =============================================================================
function addActiveKeywordObject(last_selected_keyword_object) {

	active_keyword_objects.push( last_selected_keyword_object )

	var keywords_table = document.getElementById("pending_keywords_list");
	removeChildren( keywords_table );
	for (var i=0; i<active_keyword_objects.length; i++) {
		makeKeywordListItem( active_keyword_objects[i], keywords_table, i );
	}

	document.getElementById("keywordInput").value = "";
}


// =============================================================================
function addActiveOrganizationObject(last_selected_keyword_object) {

	alert("FIXME");
}

// =============================================================================
function arrayHasItemWithKey(array, key) {
	for (var i=0; i<array.length; i++)
		if (key == array[i].key)
			return true;
	return false;
}

// =============================================================================
function presetDataSource(url_prefix) {
    // Use an XHRDataSource
    var oDS = new YAHOO.util.XHRDataSource( url_prefix );
    // Set the responseType
    oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
    // Define the schema of the delimited results
    oDS.responseSchema = {
        recordDelim: "\n",
        fieldDelim: "\t"
    };
    // Enable caching
    oDS.maxCacheEntries = 0;
	return oDS;
}

// =============================================================================
function presetAutoComplete(input_element_name, container_element_name, datasource_object, object_class, insertion_function, item_list) {

    // Instantiate the AutoComplete
    var oAC = new YAHOO.widget.AutoComplete(input_element_name, container_element_name, datasource_object);

    oAC.forceSelection = true;
    oAC.animVert = false;
    oAC.animHoriz = false;

	// XXX This only works with the cache disabled!
	oAC.applyLocalFilter = true;
	oAC.filterResults = function( sQuery , oFullResponse , oParsedResponse, oCallback ) {
		var filtered_results = [];

		for (var i=0; i<oParsedResponse.results.length; i++) {
			var result = oParsedResponse.results[i];
			var already_added = arrayHasItemWithKey(item_list, result[1]);
			if (!already_added) filtered_results.push(result);
		}
		oParsedResponse.results = filtered_results;
		return oParsedResponse;
	}


	//define your itemSelect handler function:
	var itemSelectHandler = function(sType, aArgs) {
		YAHOO.log(sType); // this is a string representing the event;
					      // e.g., "itemSelectEvent"
		var oMyAcInstance = aArgs[0]; // your AutoComplete instance
		var elListItem = aArgs[1]; // the <li> element selected in the suggestion container
		var oData = aArgs[2]; // object literal of data for the result

		var last_selected_skill_object = new object_class(oData[0], oData[1]);
                if (!arrayHasItemWithKey(item_list, last_selected_skill_object.key)) insertion_function(last_selected_skill_object);
	};
	oAC.itemSelectEvent.subscribe(itemSelectHandler);


	return oAC;
}

// =============================================================================
function criteriaListVisibility(checkbox, element_id) {
	document.getElementById(element_id).style.display = checkbox.checked ? "block" : "none";
}
</script>







<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css">
 
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script>
 
<!-- OPTIONAL: Connection (required only if using XHRDataSource) -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/autocomplete-min.js"></script>







  </head>
  <body class="yui-skin-sam" onunload="GUnload()" onload="init()">

        {% include "login_bar.html" %}
    


























    
    
    
    
<! ============================= BEGIN SIDEBAR ================================>
<div id="sidebar">


{% if current_user %}
<form name="load_form" action="/save_profile" method="post" style="margin-bottom: 1em">
<input type="hidden" name="skill_keys" />
<input type="hidden" name="keyword_keys" />
<input type="hidden" name="saved_name" />
<input type="hidden" name="deleting" value="false" />

<span id="profile_dependent_actions">
<label for="saved_searches_dropdown">Profile:</label>
<select name="load_key" id="saved_searches_dropdown" onchange="pickNewProfileAdvanced(this)">
{% for saved_search in saved_searches %}
<option value="{{saved_search.key}}">{{saved_search.title}}</option>
{% endfor %}
</select>
<button type="button" onclick="loadSearchProfile()">Reload</button>
<button type="button" onclick="deleteSaved()">Discard</button>
</span>
<button type="button" onclick="validateSave()">Save</button>

</form>

<p style="margin-bottom: 1em"><a href="/bookmarks">Bookmarked jobs</a></p>
{% endif %}



<! ================================ SKILLS ====================================>

<span style="display: block">
<input name="enable_skill_filter" checked="true" type="checkbox" id="checkbox_skill_filter" onchange="criteriaListVisibility(this, 'searchable_skills_list')" /><label for="checkbox_skill_filter"> Filter by required experience</label>
</span>
<div class="search_criteria_component" id="searchable_skills_list">

<label for="skillInput">Add skill:</label>
<span id="type_summary_foo"></span>

  <select name="skill_type" id="skill_type_dropdown" onchange="skillTypeChange(this)">
    {% for type in skill_types %}
    <option value="{{type.key}}">{{type.label}}</option>
    {% endfor %}
  </select><sup><a href="javascript:window.location='/skills?skill_category=' + document.getElementById('skill_type_dropdown').value">?</a></sup> <span class="tooltip"><input id="skillInput" type="text" class="autocomplete_input"><span class="tooltip_body">Start typing the name of a skill here.</span></input></span> <div id="skillsContainer"></div> <br />


<label for="experience_years_textbox">with </label><input id="experience_years_textbox" value="2" type="text" style="width: 2em" onchange="validateYearsTextbox(this)"><label for="experience_years_textbox"> years of experience</label>



<script type="text/javascript">
BasicRemote = function() {
	var oDS = presetDataSource("/skills_autocomplete?");
	var oAC = presetAutoComplete("skillInput", "skillsContainer", oDS, SkillObject, addActiveSkillObject, active_skill_objects);
	oAC.queryQuestionMark = false;
	oAC.generateRequest = function(sQuery) {
		return "query=" + sQuery + "&type=" + document.getElementById("skill_type_dropdown").value;
	};

	return {
		oDS: oDS,
		oAC: oAC
	};
}();
</script>
    
<table id="pending_skills_list" class="skills_table" style="margin-top: 5px" width="100%"></table>
</div>

<! ============================= KEYWORDS =====================================>

<span style="display: block">
<input name="enable_keyword_filter" checked="true" type="checkbox" id="checkbox_keyword_filter" onchange="criteriaListVisibility(this, 'searchable_keywords_list')" /><label for="checkbox_keyword_filter"> Filter by keywords</label><br/>
</span>
<div class="search_criteria_component" id="searchable_keywords_list">
<label for="keywordInput">Add keyword:</label><sup><a href="javascript:window.location='/keywords'">?</a></sup>
 <span class="tooltip"><input id="keywordInput" type="text" class="autocomplete_input"><span class="tooltip_body">Start typing a keyword here.</span></input></span>
 <div id="keywordSuggestionContainer"></div>


<script type="text/javascript">
BasicRemote2 = function() {
    var oDS = presetDataSource("/keyword_autocomplete");
    var oAC = presetAutoComplete("keywordInput", "keywordSuggestionContainer", oDS, KeywordObject, addActiveKeywordObject, active_keyword_objects);

    return {
        oDS: oDS,
        oAC: oAC
    };
}();
</script>


<table id="pending_keywords_list" class="skills_table" style="margin-top: 5px" width="100%"></table>
</div>

<p style="margin-top: 5px; margin-bottom: 1em;">
Jobs that list <strong>any</strong> of the chosen skills/keywords will be matched.
</p>


<! ============================= ORGANIZATION =================================>

<span style="display: block">
<input name="enable_organization_filter" type="checkbox" id="checkbox_organization_filter" onchange="criteriaListVisibility(this, 'searchable_organization_list')" /><label for="checkbox_organization_filter"> Filter by organization</label><br/>
</span>
<div class="search_criteria_component" id="searchable_organization_list">
<label for="organizationInput">Choose organization:</label><sup><a href="javascript:window.location='/organizations'">?</a></sup>
 <span class="tooltip"><input id="organizationInput" type="text" class="autocomplete_input"><span class="tooltip_body">Start typing an organization here.</span></input></span>
 <div id="organizationSuggestionContainer"></div>


<script type="text/javascript">
BasicRemote3 = function() {
    var oDS = presetDataSource("/organization_autocomplete");
    var oAC = presetAutoComplete("organizationInput", "organizationSuggestionContainer", oDS, OrganizationObject, addActiveOrganizationObject, active_organization_objects);  // FIXME

    return {
        oDS: oDS,
        oAC: oAC
    };
}();
</script>


<table id="pending_keywords_list" class="skills_table" style="margin-top: 5px" width="100%"></table>
</div>

<! ============================= EDUCATION =====================================>

<span style="display: block">
<input name="enable_education_filter" type="checkbox" id="checkbox_education_filter" onchange="criteriaListVisibility(this, 'education_dropdown_component')" /><label for="checkbox_education_filter"> Filter by education</label>
</span>
<div class="search_criteria_component" id="education_dropdown_component">

<label for="education_dropdown">Minimum degree:</label>
<select name="minimum_degree" id="education_dropdown">
{% for degree_level in degree_levels %}
<option value="{{degree_level.key}}">{{degree_level.name}}</option>
{% endfor %}
</select>

</div>

<! ============================= SENIORITY =====================================>

<span style="display: block">
<input name="enable_seniority_filter" type="checkbox" id="checkbox_seniority_filter" onchange="criteriaListVisibility(this, 'seniority_dropdown_component')" /><label for="checkbox_seniority_filter"> Filter by seniority (career level)</label>
</span>
<div class="search_criteria_component" id="seniority_dropdown_component">

<label for="seniority_dropdown">Position seniority:</label>
<select name="seniority_level" id="seniority_dropdown">
{% for seniority_level in seniority_levels %}
<option value="{{seniority_level.key}}">{{seniority_level.name}}</option>
{% endfor %}
</select>

</div>

<! ============================= PERMANENCE =====================================>

<span style="display: block">
<input name="enable_permanence_filter" type="checkbox" id="checkbox_permanence_filter" onchange="criteriaListVisibility(this, 'permanence_dropdown_component')" /><label for="checkbox_permanence_filter"> Filter by employment term</label>
</span>
<div class="search_criteria_component" id="permanence_dropdown_component">

<label for="permanence_dropdown">Employment term/duration:</label>
<select name="permanence_level" id="permanence_dropdown">
{% for permanence_level in permanence_levels %}
<option value="{{permanence_level.key}}">{{permanence_level.name}}</option>
{% endfor %}
</select>

</div>


<! ============================= BEGIN MAIN ===================================>
</div>

    <div id="container">

        <table><tr><td><img src="/static/images/logo.png"/></td><td>

        <form style="margin-left: 20px" action="" onsubmit="document.getElementById('checkbox_search_anywhere').checked ? locationAgnosticSearch() : doGeocodeAndSearch(); return false;">
          <div id="search-container">
            <p><label for="search-query">Search for job openings near:</label></p>
            <input id="search-query" type="search" value="Houston, TX" />

            <input type="submit" value="Search"/> <input name="enable_search_anywhere" type="checkbox" id="checkbox_search_anywhere" onchange="toggleAnywhereButton(this);" /><label for="checkbox_search_anywhere"> Anywhere</label><br/>
            <input name="enable_proximity" type="checkbox" id="checkbox_proximity" onchange="document.getElementById('miles_input').disabled = !this.checked;" /><label for="checkbox_proximity"> Within </label><input name="proximity_miles" size="2" maxlength="3" value="50" type="text" id="miles_input" disabled="true"/><label for="miles_input"> mile radius</label><br/>
            <input name="enable_sample_jobs" type="checkbox" checked="true" id="checkbox_sample_jobs" /><label for="checkbox_sample_jobs"> Use simulated data</label><br/>
            <img id="loading" src="/static/images/loading.gif" alt="Loading..."/>

            <div id="search-error">&nbsp;</div>
          </div>
        </form>
        </td></tr></table>

          <span id="list-view-status">Enter a search location to search for nearby jobs.</span><span id="status_bar"></span>
      <div id="view-toggle">
	
        <a href="javascript:" id="list_view_toggler">List view &raquo;</a>
      </div>
      
      <div id="content" class="clearfix">
        <div id="list-view-container">
          <ul id="list-view">
          </ul>
        </div>
        
        <div id="map-container">
          <div id="map"></div>
        </div>
      </div>

    </div>
          
      <p class="copyright_notice">Copyright &copy; 2010, Karl Ostmo</p>
    
    <div class="badge">
      <a href="http://code.google.com/appengine/"><img
       src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif"
       alt="Powered by Google App Engine"></a>
    </div>
    
    

    
    <script type="text/html" id="tpl_result_list_item">
       {% include "microtemplates/skills_listview_item.html" %}
    </script>
  </body>
</html>
